<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
  	<title>Test Dojo</title>
  	<link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone.css"/>
  	<link rel="stylesheet" href="../../../dojox/mobile/themes/iphone/iphone-compat.css"/>
  	<script src="../../../dojo/dojo.js" data-dojo-config="async:true, parseOnLoad:true, locale:'en', isDebug:true"></script>
  	<script>
  	    require([
		"dojo/parser",
		"dojo/ready",
		// non referenced includes
		"dojox/mobile",
		"dojox/mobile/compat",
		"dojox/mobile/SwapView",
		"dojox/mobile/PageIndicator"
	], function (parser, ready) {

	    ready(function () {
	        Button1.on('click', function(){
	        	Pane1.show();
	        	PageIndicator.reset();
	        });
	        
	        Button2.on('click', function(){
	        	var activeView = Pane1.getShowingView();
	        	activeView.goTo(-1, 'Pane1');
	        });
	    });
	});
  	</script>
  	<style>
		.mblView {
		  border-top: 1px solid transparent;
		  border-bottom: 10px solid red;
		}
  	</style>
</head>
<body style="visibility:hidden;">
	<h1 data-dojo-type="dojox/mobile/Heading" data-dojo-props="label:'Test SwapView'">
		<span data-dojo-id="Button1" data-dojo-type="dojox/mobile/ToolBarButton">Go to Pane1</span>
		<span data-dojo-id="Button2" data-dojo-type="dojox/mobile/ToolBarButton">Slide to Pane1</span>
	</h1>
		
 	<div data-dojo-type="dojox/mobile/PageIndicator" data-dojo-id="PageIndicator">
  		</div>
	
	<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane1" id="Pane1">
    	<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
    		Swipe me to the left until Pane 3 is displayed, then click the Go to Pane1 button and check that everything is ok (including the page indicator value). Then do the same using the Slide to Pane1 button.
    	</div>
  	</div>

  	<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane2">
    	<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
    		Pane 2
    	</div>
  	</div>

  	<div data-dojo-type="dojox/mobile/SwapView" data-dojo-id="Pane3">
    	<div data-dojo-type="dojox/mobile/RoundRect" data-dojo-props='shadow:true'>
    		Pane 3
    	</div>
  	</div>
  	
</body>
</html> 